<template>
	<view>
		<view class="title" :class="topNavStyle.class" :style="topNavStyle.style">
			<view class="flex_col">
				<view class="top" :class="topNavStyle.class" :style="{ opacity: topOpacity }">
					<view>
						渐变+吸顶列表
					</view>
				</view>

			</view>
		</view>
		<view class="top-bg"></view>
		<view class="top flex">
			<view class="center flex" style="color: #fff;">
				渐变+吸顶列表
			</view>
		</view>
		<view class="list">
			<view class="sticky-box list-tab flex">
				<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>
			<view>
				<view class="list-item">
					<view v-for="(item, index) in list" :key="index">
						<view class="item">
							列表{{ index }}
						</view>
						<view class="line"></view>
					</view>
					<view class="uni-load-more">
						<uni-load-more :status="status"></uni-load-more>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		topNavStyle: Object,
		topOpacity: Number,
	},
	// computed: {
	// 	topNavStyle() {
	// 		let r = this.pageScrollTop / 100;
	// 		this.topOpacity = Math.min(r, 1);
	// 		return {
	// 			"class": this.topOpacity >= 0.85 ? 'style2' : '',
	// 			"style": `background-color: rgba(245, 245, 245, ${this.topOpacity});`
	// 		}
	// 	}
	// },
	data() {
		return {
			pageScrollTop: 0,
			// topOpacity: 0,
			current: 0,
			tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻'],
			list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
			status: ''
		}
	},
	methods: {
		changeTab(index) {
			console.log('当前选中的项：' + index)
		},
	},
	onPageScroll(e) {
		this.pageScrollTop = Math.floor(e.scrollTop);
		console.log(e);
	},
	onReachBottom() {
		console.log('触底');
		this.status = 'loading'
		if (this.list.length >= 40) {
			this.status = 'no-more'
			return
		}
		// 这里只是为了看到加载效果
		setTimeout(() => {
			for (let index = 0; index < 10; index++) {
				this.list.push({})
			}
		}, 500);
	}
}
</script>

<style lang="scss" scoped>
.sticky-box {
	position: sticky;
	top: calc(var(--status-bar-height) + 106rpx);
	z-index: 99;
	background-color: #fff;
	border-radius: 16rpx 16rpx 0 0;
}

.title {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding-top: var(--status-bar-height);
	z-index: 999;

	&>view {
		height: 108rpx;
	}

	.top {
		position: absolute;
		top: 0;
		width: 100%;
		height: 108rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		text-align: center;
	}
}

.top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 466rpx;
	background-image: url('@/static/image/top.png');
	background-size: cover;
}

.top {
	position: absolute;
	top: calc(var(--status-bar-height));
	width: 100%;
	height: 108rpx;
	line-height: 108rpx;
	text-align: center;
	z-index: 9;
}

.list {
	position: absolute;
	top: calc(var(--status-bar-height) + 466rpx);
	width: 100%;
	z-index: 9;

	.list-tab {
		height: 108rpx;
	}

	.list-item {
		width: 100%;

		.item {
			height: 130rpx;
			line-height: 130rpx;
			margin-bottom: 24rpx;
			text-align: center;
		}

		.line {
			width: 95%;
			margin: 0 auto;
			height: 1rpx;
			background: #ccc;
		}

		.uni-load-more {
			margin: 40rpx auto;
		}
	}
}
</style>
